<template>
	<view class="container">
		<view class="head">
			<uni-icons type="redo" size="17px" style="color: #FCFCFC; float: right;margin-right: 12px;"></uni-icons>
			<uni-nav-bar dark :fixed="true" shadow background-color="#1F8AF3" color="#FCFCFC" status-bar left-icon="left" title="立即支付" @clickLeft="open()" />
			<uni-popup ref="popup" type="dialog">
				<uni-popup-dialog mode="base" content="确认要放弃支付吗？"  confirmText="放弃支付" cancelText="继续支付" message="成功消息" :duration="2000" :before-close="true" @close="close" @confirm="confirm(id)"></uni-popup-dialog>
			</uni-popup>
		</view>
		<view class="main">
			<view class="goods" v-for="(item,index) in goodsList" :key="index">
				<image :src="item.imgUrl" mode="aspectFit"></image>
				<view class="content">
					<text class="text3">{{item.name}}</text>
					<view class="content1">
						<text class="price">￥{{item.price}}</text>
					</view>
				</view>
			</view>
			<view class="pay">
				<text class="payText">支付方式</text>
				<view class="uni-list">
					<view class="paychoose">
						<image class="img1" src="~@/static/weixin.png" mode="aspectFit"></image>
						<text class="paytxt">微信支付</text>
						<label class="radio" @click="changeAll1">
							<radio value="r1" :checked="r1 == 1 ? true : false"/>
						</label>
					</view>
					<view class="paychoose">
						<image class="img1" src="~@/static/coin.png" mode="aspectFit"></image>
						<text class="paytxt">金币支付</text>
						<label class="radio2" @click="changeAll2"><radio value="r2" :checked="r2 == 1 ? true : false"/></label>
					</view>
					<!-- <view class="paychoose">
						<image class="img1" src="~@/static/huabei.png" mode="aspectFit"></image>

							<view>
								<text class="paytxt">花呗分期</text>
								<uni-data-select
								        v-model="select1"
								        :localdata="range1"
								        @change="change"
										class="selectbtn"
								      ></uni-data-select>
							</view>
						<label class="radio1" @click="changeAll3"><radio value="r3" :checked="r3 == 1 ? true : false"/></label>
					</view> -->
					<!-- <view class="paychoose">
						<image class="img1" src="~@/static/jingdongbaitiao.png" mode="aspectFit"></image>

						<view>
							<text class="paytxt">京东白条</text>
							<uni-data-select
							        v-model="select2"
							        :localdata="range2"
							        @change="change"
									class="selectbtn"
							    ></uni-data-select>
						</view>
						<label class="radio1" @click="changeAll4"><radio value="r4" :checked="r4 == 1 ? true : false"/></label>
					</view> -->
					<!-- <view class="paychoose">
						<image class="img1" src="~@/static/xinyongka.png" mode="aspectFit"></image>
						<text class="paytxt">信用卡支付</text>
						<label class="radio2" @click="changeAll5"><radio value="r5" :checked="r5 == 1 ? true : false"/></label>
					</view> -->

				</view>

			</view>
			<view class="payButton">
				<button type="primary" @click="payClick">立即支付</button>
			</view>
		</view>
	</view>
</template>

<script>
	export default{
		onLoad(e) {
			this.id = e.id;
			// console.log(this.id);
		},
		created() {
			this.$axios.get("/goods/search",{
				params:{
					key:'',
				},
				headers:{
					'token':localStorage.getItem('token')
				}
			}).then(res=>{
				let key = this.id
				// console.log('key:'+key);
				res.data.data.map(item => {
				  if (item.fileType === 0)
								item.imgUrl = '../../static/pdficon.jpeg'
				  else if (item.fileType === 1 || item.fileType ===2)
								item.imgUrl = '../../static/docIcon.jpg'
				  else
								item.imgUrl = '../../static/pdficon.jpeg' //默认为pdf

				  item.uploadTime = new Date()
				})
				for(var i = 0; i < res.data.data.length; i++){
					if(res.data.data[i].id == key){
						this.goodsList.push(res.data.data[i])
						// console.log(111);

					}
				}
				// console.log(this.goodsList);
				}).catch(()=>{
					uni.showToast({
						title:"请求失败",
						icon:"none"
					})
				})
		},
		data(){
			return{
				r1:'0',
				r2:'0',
				id:'',
				goodsList:[],
				// select1: '',
				// range1: [
				//     { value: 0, text: "3期 x ￥559.67" },
				//     { value: 1, text: "6期 x ￥299.84" },
				//     { value: 2, text: "12期 x ￥160.00" },
				// ],
				// select2: '',
				// range2: [
				//     { value: 0, text: "3期 x ￥559.67" },
				//     { value: 1, text: "6期 x ￥299.84" },
				//     { value: 2, text: "12期 x ￥160.00" },
				// ],
			}
		},

		methods:{
			open(){
				// 加个点击事件，返回上一页
				// uni.navigateTo({
				// 	url:'/pages/profession/order'
				// })
				this.$refs.popup.open()
			},
			//点击dialog取消按钮触发
			close() {
				// TODO 做一些其他的事情，before-close 为true的情况下，手动执行 close 才会关闭对话框
				// ...
				console.log("继续支付")
				this.$refs.popup.close()
			},
			//点击dialog确定按钮触发
			confirm(id) {
				// 输入框的值
				console.log("放弃支付")
				// TODO 做一些其他的事情，手动执行 close 才会关闭对话框
				// ...
				this.$refs.popup.close()
				uni.navigateTo({
					url:'/pages/index/details?id='+id+''
				})
			},
			payClick(){
				//点击支付方法
        let that = this;
        this.$axios.get('/order/create',{
          params: {
            goodsId: that.id
          },
          headers: {
            token: localStorage.getItem('token')
          }
        }).then(res => {
          if (parseInt(res.data.code) === 200) {
            uni.showToast({
              title:'支付成功，稍后可以去我的下载查看',
              icon:'success',
              duration:5000,
            })

            setTimeout(function(){
              uni.switchTab({
                url:'/pages/index/index',
              })
            },2000)
          }else {
            uni.showToast({
              title: res.data.msg,
              icon:'error',
              duration:5000,
            })
          }
        })
			},
			//取消勾选按钮
			changeAll1(){
				this.r1 = !this.r1;
			},
			changeAll2(){
				this.r2 = !this.r2;
			},
			// changeAll3(){
			// 	this.r3 = !this.r3;
			// },
			// changeAll4(){
			// 	this.r4 = !this.r4;
			// },
			// changeAll5(){
			// 	this.r5 = !this.r5;
			// },
			//下拉框打印
			change(e){
				console.log("e:",e);
			}
		}
	}
</script>

<style>
	.main{
		width: 100%;
	}
	.goods{
		display: flex;
		width: 100%;
		height: 120px;
		background: #fff;
		/* margin: 7px 0; */
	}
	.content1{
		margin-top: 43px;
	}
	.price{
		color: #ff0000;
		font-size: 16px;
		margin-left: 80%;
		font-weight: 700;
	}
	uni-image{
		width: 130px;
		height: 85px;
		margin-top: 17px;
	}
	.text3{
		font-size: 14px;
	}
	.pay{
		margin-top: 17px;
	}
	.payText{
		margin-left: 23px;
		font-size: 14px;
	}
	.payButton{
		position: fixed;  /*将一个块固定到底部*/
		bottom: 0;        /*将一个块固定到底部*/
		width: 100%;
	}
	/*支付方式css*/
	.paychoose{
		display: flex;
		background-color: #FFFFFF;
		border-bottom: 1px solid rgba(187, 187, 187, 1);

	}
	.img1{
		width: 24px;
		height: 24px;
		margin-left: 23px;
		margin-bottom: 18px;
	}

	.paytxt{
		margin-left: 20px;
		font-size: 14px;
		font-weight: 700;
		margin-top: 17px;
	}
	.radio{
		margin-top: 15px;
		margin-left: 55%;
	}
	.radio1{
		margin-top: 15px;
		margin-left: 40%;
	}
	.radio2{
		margin-top: 15px;
		margin-left: 55%;
	}
	.selectbtn{
		margin-left: 17px;
		width: 116px;
		height: 32px;
	}
</style>
